<template>
  <div class="app-container">
    <el-row class="head">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="6.s25rem"
      >
        <el-col :span="6">
          <el-form-item class="first-form" label="数据表名:" prop="tableName">
            <el-input
              v-model="queryParams.tableName"
              placeholder="请输入数据表名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item class="first-form" label="状态:" prop="dataState">
            <el-select
              v-model="queryParams.dataState"
              size="small"
              placeholder="请选择"
            >
              <el-option key="0" label="待清洗" value="-1"> </el-option>
              <el-option key="1" label="清洗中" value="1"> </el-option>
              <el-option key="2" label="自动清洗中" value="2"> </el-option>
              <el-option key="3" label="待发布" value="-2"> </el-option>
              <el-option key="4" label="已发布" value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item class="first-form" label="创建时间:">
            <el-date-picker
              style="width: 240px"
              v-model="selDataTime"
              type="daterange"
              value-format="yyyy-M-d"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              size="small"
          /></el-form-item>
        </el-col>
        <el-col :span="4" :push="2">
          <el-form-item class="caoz">
            <el-button
              class="search-btn"
              type="danger"
              icon="el-icon-search"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              class="reset-btn"
              icon="el-icon-refresh-right"
              @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-row class="card-list" v-loading="loading">
      <div class="card-title">待清洗数据表</div>
      <el-col :span="6" v-for="(o, index) in scckocMetaList" :key="index">
        <el-card shadow="never" class="data-card" :body-style="{ padding: 0 }">
          <div style="font-size: 21px; font-weight: bold">
            {{ o.tableName }}
          </div>
          <div class="card-img"></div>
          <div class="dn-card">
            {{ o.createTime }} {{ o.createBy == null ? "admin" : o.createBy }}
          </div>
          <div class="card-flex">
            <div :class="'card-state' + (o.dataState + 2)">
              {{ cardState[o.dataState + 2] }}
            </div>
            <div :class="o.schemaId != 3 ? 'card-state14' : 'card-state15 '">
              {{ cardName[o.schemaId - 1] }}
            </div>
          </div>
          <div class="caozuo">
            <el-col class="lc" :span="13">
              <div
                :class="o.dataState != 1 && o.dataState != -1 ? 'm2' : 'm1'"
                @click="Clear(o)"
              >
                <div class="jinruliu"></div>
                <div class="liu">进入流程</div>
              </div>
            </el-col>
            <el-col :span="13">
              <el-link
                :underline="false"
                :type="o.dataState == 1 ? 'primary' : 'info'"
                :disabled="o.dataState != 1"
                style="font-size: 17px; font-weight: 500"
                @click="handleUpdate(o)"
                >{{ " " }}提审{{ " " }}</el-link
              >
              <el-link
                :underline="false"
                :type="o.dataState == -2 ? 'primary' : 'info'"
                :disabled="o.dataState != -2"
                @click="release(o)"
                style="font-size: 17px; font-weight: 500"
                >{{ " " }}发布{{ " " }}|</el-link
              >
            </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-sizes="[12, 16, 20, 24]"
      layout="sizes, prev, pager, next"
      :total="pageTotal"
    />

    <!-- 添加或修改库的元数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <div class="del-msg">
        <div class="msg1" style="font-size: 18px">
          确认将<span class="span1" style="color: red">{{
            this.outDb.tableName
          }}</span
          >表导入至正式库当中吗?
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click="cancel"
          style="font-size: 18px; height: 40px"
          >取 消</el-button
        >
        <el-button
          class="commit"
          type="primary"
          style="font-size: 18px; height: 40px"
          @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 删除对话框 -->
    <el-dialog
      :visible.sync="delShow"
      width="480px"
      append-to-body
      class="del-dialog"
    >
      <div class="del-img"></div>
      <div class="del-msg">
        <div class="msg1">
          确认要删除<span class="span1">{{ dialogName }}</span
          >吗？
        </div>
        <div class="msg2">删除后数据不可恢复！请谨慎操作！</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="cancel">取 消</el-button>
        <el-button class="commit" type="primary" @click="handleDelete"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getlistClearTables,
  getScckocMeta,
  delScckocMeta,
  getPrimaryRs,
  publishClearTable,
  addScckocMeta,
  updateScckocMeta,
  exportScckocMeta,
} from "@/api/scckocMeta/scckocMeta";
import { findTable, changeState, addColumns } from "@/api/burnPower/interface";
export default {
  name: "ScckocMeta",
  data() {
    return {
      //中文名
      cardName: ["物种", "热力学", "实验高温热物性", "动力学"],
      //发布参数
      outDb: {},
      //创建时间
      selDataTime: "",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      pageTotal: 0,
      pageSize: 12,
      page: 1,
      // 库的元数据表格数据
      scckocMetaList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      delShow: false,
      dialogName: "",
      dialogTableName: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        tableName: null,
        schemaId: null,
        total: null,
        dataState: null,
        dataSource: null,
        dataType: "C",
        storeLoc: null,
        createrId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //插件id选择列表
      plugDatas: [
        {
          value: "1",
          label: "Sql",
        },
        {
          value: "0",
          label: "Java",
        },
      ],
      PrimaryRs: [],
      val: [],
      //页面传参
       cardName: [
        "物种",
        "动力学",
        "实验高温热物性",
        "",
        "",
        "热力学",
        "层级火焰",
        "点火延迟",
        "输运",
        "物种浓度",
        "其他",
      ],
      cardState: ["待发布", "待清洗", "已发布", "清洗中", "自动清理"],
      releaseStyleL: ["序号", "类型"],
      releaseStyle: "序号",
      addStyleL: ["选择已有表", "新增表"],
      addStyle: "选择已有表",
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getPrimaryRss();
  },
  methods: {
    /** 查询库的元数据列表 */
    getList() {
      this.loading = true;
      getlistClearTables(this.queryParams).then((response) => {
        this.scckocMetaList = response.data.rows;
        console.log(this.scckocMetaList, "初始查询数据");
        this.pageTotal = response.data.total;
        console.log("total", response.data.total);
        this.loading = false;
      });
    },
    getPrimaryRss() {
      getPrimaryRs().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          console.log("getPrimaryRs遍历数据", res.data[i]);
          this.PrimaryRs.push(res.data[i]);
        }
        console.log("getPrimaryRs返回处理数据", this.PrimaryRs);
      });
    },

    //清洗
    Clear(val) {
      // 状态为待清洗才会跳转
      console.log("val", val, "id", val.schemaId);

      if (val.dataState === -1 || val.dataState === 1) {
        let table = val.id;
        let dataState = 1;
        let flag = val.dataState;
        console.log(table);
        if (val.schemaId != 3) {
          addColumns(table);
        }
        changeState(table, dataState, flag);
        this.$router.push({
          path: "/clearspace/clearspace",
          name: "Clearspace",
          query: {
            val: JSON.stringify(val),
          },
        });
      }
    },
    // 发布
    release(val) {
      this.title = "发布";
      this.open = true;
      this.outDb = val;
      console.log("outDb", this.outDb, "val", val);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.delShow = false;
      this.ids = [];
      this.delId = null;
      this.reset();
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      console.log("测试");
      this.queryParams.pageNum = val;
      this.getList();
      console.log("page", this.queryParams.pageNum, this.page);
    },
    //每页条数
    handleSizeChange(val) {
      console.log(val, "val");
      this.pageSize = val;
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tableName: null,
        schemaId: null,
        dataState: null,
        dataSource: null,
        dataType: null,
        storeLoc: null,
        createTime: null,
        createrId: null,
      };
      // this.resetForm("form");
    },
    //修改table(数据保存列样式)
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "数据保存位置") {
        return "font-size: 15px"; // 修改的样式
      } else {
        return "";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let table = this.queryParams.tableName;
      let createTime = null;

      let data = JSON.stringify(this.selDataTime);
      let reg = new RegExp('"', "g");
      data = data.replace(reg, "");
      data = data.replace("[", "");
      createTime = data.replace("]", "");
      let state = this.queryParams.dataState;
      let page = this.queryParams.pageNum;

      let size = this.queryParams.pageSize;
      console.log("get :", typeof createrId);

      let type = "C";
      if (createTime === null || createTime === "" || createTime === '""') {
        createTime = "null";
      }
      console.log("您已上传创建人信息");
      findTable(table, createTime, type, page, size, state).then((res) => {
        this.scckocMetaList = res.rows;
        console.log(res, "scckocMetaList1");
        console.log(res.data, "scckocMetaList1");
        // console.log(this.scckocMetaList, "name");
        this.pageTotal = parseInt(res.total);
        console.log("total", this.total);
        // this.loading = false;
        console.log("dataState1: ", this.queryParams.dataState);
      });
    },

    //模糊收索接口
    findTable() {},
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
      this.selDataTime();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库的元数据";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      console.log(row);
      this.$router.push({ path: "/clearspace/clearDetail", query: row });
      // let table = row.id;
      // let dataState = -2;
      // let flag = row.dataState;
      // console.log(table);
      // changeState(table, dataState, flag);
    },
    /** 提交按钮 */
    submitForm() {
      let table1 = this.outDb.tableName;
      let id = this.outDb.schemaId;
      let val2 = this.PrimaryRs.find((item) => item.templateId == id);
      let table2 = val2.tableName;
      publishClearTable(table1, table2).then((res) => {
        console.log(res);
        if (res.msg == "操作成功！") {
          this.$message.success("发布成功");
          let table = this.outDb.id;
          let dataState = 0;
          let flag = this.outDb.dataState;
          changeState(table, dataState, flag).then(() => {
            this.getList();
          });
          this.open = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /** 删除按钮操作 */
    showDel(item) {
      this.delId = item.id;
      this.delShow = true;
      this.dialogName = item.tableName;
    },
    handleDelete(row) {
      const ids = this.delId || this.ids;
      delScckocMeta(ids)
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
          this.delId = null;
          this.ids = [];
        })
        .catch(() => {});
    },

    text() {
      console.log("点击");
    },
  },
};
</script>
<style lang="scss" scoped>
.card-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-form-item__label {
  // margin-left: 37px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 37px;
}
::v-deep.first-form {
  .el-form-item__label {
    margin-left: 0;
    font-size: 16px;
  }
}
::v-deep .el-input--small .el-input__inner {
  width: 160px;
  height: 32px;
  background: #ffffff;
  font-family: PuHuiTi;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #eeeeee;
}
::v-deep .mb8 .el-button {
  font-size: 16px;
}
::v-deep .el-form .el-button {
  font-size: 16px;
}
.automatic {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  span {
    margin-right: 10px;
    width: 4vw;
  }
}
.autoAlert {
  position: absolute;
  top: 0px !important;
}
::v-deep .automatic .el-select {
  width: 80%;
}
</style>

<style lang="scss" scoped>
.head {
  min-width: 1152px;
  height: 4.8125rem;
  background: #ffffff;
  margin: 0 1.5rem 0.6875rem 0;
  padding: 1.25rem 0.9375rem;
  border-radius: 0.5rem;
}
.caoz {
  padding-left: 5px;
  width: 271px;
  float: right;
}
::v-deep .el-form .el-button {
  font-size: 16px;

  font-weight: 400;
}
.search-btn {
  padding: 0 1.25rem;
  width: 128px;
  height: 2rem;
  font-family: PuHuiTi;
  color: #ffffff;
  background: #bd4541;
  border-radius: 0.25rem;
}
.reset-btn {
  padding: 0 1.25rem;
  height: 2rem;
  width: 128px;
  font-family: PuHuiTi;
  font-size: 0.875rem;
  border: 1px solid #eeeeee;
  border-radius: 0.25rem;
}
.card-list {
  position: relative;
  min-width: 1152px;
  margin: 0 24px 11px 0;
  padding-top: 40px;
  padding-left: 16px;
  // height: 49.375rem;
  border-radius: 4px;
  background: #ffffff;
}
.card-title {
  position: absolute;
  top: 19px;
  height: 16px;
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.pagination-container {
  background: #f5f5f5;
  min-width: 1152px;
  margin: 0 24px 11px 0;
  .el-pagination {
    // right: 1.3125rem;
    position: absolute;
  }
}
.data-card {
  padding: 14px 18px 0 16px;
  margin-bottom: 13px;
  position: relative;
  width: 320px;
  height: 186px;
  background: #ffffff;
  border-radius: 5px;
  opacity: 1;

  border: 1px solid #f5f5f5;
  .card-img {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 26px;
    height: 26px;
    margin-top: 16px;
    background: url("./icon.png");
    background-size: cover;
  }
  .el-icon-date {
    width: 14px;
  }
  .dn-card {
    color: #575757;
    margin-bottom: 11px;
    margin-top: 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 0.9375rem;
  }
  .card-state {
    &4 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f5fff6;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #479706;
      margin-top: 20px;
    }
    &5 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff9f5;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff7c24;
      margin-top: 20px;
    }
    &6 {
      width: 154px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &9 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f7f5ff;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8146ff;
      margin-top: 20px;
    }
    &10 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &11 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &12 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #bfbf00;
      margin-top: 20px;
    }
    &13 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #7b4d12;
      margin-top: 20px;
    }
    &1 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #f59a23;
      margin-top: 20px;
    }
    &2 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #02a7f0;
      margin-top: 20px;
    }
    &0 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ec808d;
      margin-top: 20px;
    }
    &3 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8080ff;
      margin-top: 20px;
    }
    &14 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #5a5a5a;
      margin-top: 20px;
    }
    &15 {
      width: 154px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #5a5a5a;
      margin-top: 20px;
    }
  }
  .caozuo {
    position: absolute;
    display: flex;
    right: 18px;
    left: 16px;
    bottom: 13px;
    height: 24px;
    // background-color: #2B40FF;
    .lc {
      height: 1.9rem;
      .m1 {
        cursor: pointer; // 鼠标变手型
        width: 8.3125rem;
        height: 1.9rem !important;
        margin: 0;
        padding: 0;
        .jinruliu {
          width: 24px;
          height: 24px;
          display: inline-block;
          // border: 1px solid #4353E4;
          // border-radius: 50%;
          // padding: .125rem;
          background: url("./add1.png");
          background-size: cover;
        }
        .liu {
          display: inline-block;
          vertical-align: top;
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
          color: #4353e4;
          height: 24px;
          line-height: 24px;
        }
      }
      .m2 {
        cursor: not-allowed; //鼠标禁止
        width: 8.3125rem;
        height: 24px !important;
        margin: 0;
        padding: 0;
        .jinruliu {
          width: 24px;
          height: 24px;
          display: inline-block;
          background: url("./add2.png");
          background-size: cover;
          border: 1px solid rgb(167, 167, 167);
          border-radius: 50%;
          font-size: 23px;
        }
        .liu {
          display: inline-block;
          vertical-align: top;
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
          color: #bcbcbc;
          height: 24px;
          line-height: 24px;
        }
      }
    }
    .el-link {
      font-size: 13px;
      line-height: 24px;
      height: 24px;
      margin-right: 5px;
      font-weight: 400;
      &.el-link--primary {
        color: #4353e4;
      }
      &.el-link--info {
        color: #cccccc;
      }
      float: right;
      &.el-link--danger {
        color: #bd4541;
      }
    }
  }
}
.cancel {
  border: 0;
  height: 31px;
  font-size: 14px;

  font-weight: 400;
  color: #666666;
}
.commit {
  width: 128px;
  height: 31px;
  font-size: 14px;

  font-weight: 400;
  color: #ffffff;
  // line-height: 31px;
  background: #bd4541;
  border-radius: 4px;
  border: 0;
}
::v-deep .el-dialog {
  border-radius: 10px;
  // height: 288px;
  // top: 158px;
  &__body {
    padding-bottom: 0;
    padding-top: 0;
    padding: 10px 38px 10px 38px;
  }
  &__header {
    padding: 33px 38px 10px 38px;
    .el-dialog__title {
      font-size: 20px;
      font-weight: 600;
      color: #333333;
    }
  }
  &__footer {
    padding: 10px 38px 20px 38px;
  }
  .el-input__inner {
    width: 248px;
    height: 31px;
    border-radius: 5px;
    margin-left: 15px;
    font-size: 16px;

    font-weight: 400;
  }
  .el-form-item__label {
    margin: 0;
  }
  .el-radio-button {
    margin-left: 15px;
    &__inner {
      width: 124px;
      height: 31px;
      // background: #BD4541;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #bd4541;
    border-color: #bd4541;
  }
}

.form-table {
  padding: 0;
  width: 409px;
  height: 201px;
  margin-left: 15px;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #eeeeee;
  // overflow:auto;
  ::v-deep .el-table td,
  .el-table th {
    padding: 6px 0;
    height: 41px;
  }
}

.del-dialog {
  .el-dialog {
    height: 270px;
    border-radius: 10px;
    &__body {
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 10px 38px 10px 38px;
      .el-dialog__title {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
      }
    }
    &__footer {
      padding: 10px 38px 20px 38px;
    }
  }
  .del-img {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    background: url("../../../assets/images/warnning.png");
    background-size: cover;
  }
  .del-msg {
    margin-top: 37px;
    text-align: center;

    .msg1 {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      .span1 {
        color: #bd4541;
      }
    }
    .msg2 {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      color: #bd4541;
    }
    .msg3 {
      margin-top: 8px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>
